
import React, { Component } from 'react';
import { PlusOutlined, RightOutlined } from '@ant-design/icons';
import { Select } from 'antd';
import './AreaManagementPage.less';

class AreaManagementPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            company: 'HSE SMART INC',
            floor: '13F Area',
            offices: [
                { name: 'Office 01', icon: 'file' },
                { name: 'Office 02', icon: 'lightbulb' },
                { name: 'Office 03', icon: 'user' },
                { name: 'Office 04', icon: 'file' },
                { name: 'Office 05', icon: 'lightbulb' },
                { name: 'Office 06', icon: 'user' }
            ]
        };
    }

    handleCompanyChange = (value) => {
        this.setState({ company: value });
    };

    handleFloorChange = (value) => {
        this.setState({ floor: value });
    };

    render() {
        return (
            <div className="area-management-container">
                {/* 1. Area Management 标题行 */}
                <div className="header-row">
                    <h2>Area Management</h2>
                    {/* <PlusOutlined className="action-icon" /> */}
                </div>

                {/* 2. Create Building 区域 */}
                <div className="section">
                    <div className="section-header">
                        <span>Create Building</span>
                        <div className="action-group">
                            <span>...</span>
                            <PlusOutlined className="action-icon" />
                        </div>
                    </div>
                    <Select
                        className="dropdown1"
                        value={this.state.company}
                        onChange={this.handleCompanyChange}
                        options={[
                            { value: 'HSE SMART INC', label: 'HSE SMART INC' }
                        ]}
                    />
                </div>

                {/* 3. Create Floor Plan 区域 */}
                <div className="section">
                    <div className="section-header">
                        <span>Create a Area Floor Plan</span>
                        <PlusOutlined className="action-icon" />
                    </div>
                    <Select
                        className="dropdown1"
                        value={this.state.floor}
                        onChange={this.handleFloorChange}
                        options={[
                            { value: '13F Area', label: '13F Area' }
                        ]}
                    />
                </div>

                {/* 4. Create Group 区域 */}
                <div className="section">
                    <div className="section-header">
                        <span>Create Group</span>
                        <PlusOutlined className="action-icon" />
                    </div>
                    <div className="office-list">
                        {this.state.offices.map((office) => (
                            <div key={office.name} className="office-item">
                                <span className={`office-icon ${office.icon}`} />
                                <span>{office.name}</span>
                                <RightOutlined className="arrow-icon" />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}

export default AreaManagementPage;
